<template>
  <div class='page grey-stage source-guan-huai'>
    <crm-cover v-if="isShowCover" :hideOnBlur="false"></crm-cover>
    <div
    class="scroll-container"
    :style="{
      'padding-top': this.scrollerTop + 'px',
      'height': this.scrollerHeight + 'px',
      'width': this.winWidth + 'px'
    }"
    >
      <div class="title">
        <div class="title-left">
          <h1>{{ gh_data.gh_custom_count || 0}}</h1>
          <p>已关怀人数</p>
        </div>
        <div class="title-center">
          <h1>{{ gh_data.gh_total_num || 0}}</h1>
          <p>已关怀次数</p>
        </div>
        <div class="title-right">
          <h1>{{ gh_data.gh_rate || 0}}</h1>
          <p>关怀频次</p>
        </div>
      </div>


      <div class="no-data-tip" v-if="!Object.keys(data).length">暂无数据</div>
      <div class="section-title" v-else>
        <Echart class="echart" :options="options" v-if="options" />
      </div>


      <div class="bottom">
        <div class="box" v-for="(value, index) in data" >
          <div class="box-top">
            <p>{{ value.name }} : {{ value.total }}人</p>
          </div>
          <div class="box-bottom">
            <div class="left">
              <h2>{{ value.hour_2_total }}人</h2>
              <p>2小时内</p>
            </div>

            <div class="left">
              <h2>{{ value.hour_4_total }}人</h2>
              <p>4小时内</p>
            </div>

            <div class="left">
              <h2>{{ value.day_1_total }}人</h2>
              <p>24小时内</p>
            </div>

            <div class="left">
              <h2>{{ value.day_2_total }}人</h2>
              <p>48小时内</p>
            </div>

            <div class="left">
              <h2>{{ value.week_1_total }}人</h2>
              <p>一周内</p>
            </div>

            <div class="left">
              <h2>{{ value.week_2_total }}人</h2>
              <p>二周内</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <crm-tabbar v-if="!isAppMode" activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>

<script>
import crmTabbar from '../components/crm-tabbar'
import topFilter from '../components/top-filter'
import MemberItem from '../components/ranking/member-item'

import Echart from '../components/Echarts'
require('echarts/lib/chart/bar')
require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')


import Q from 'q'
import crmCover from '../components/crm-cover'
import { mapState, mapActions } from 'vuex'
import { Progress } from 'mint-ui'

import { timeOpts } from '../lib/options/time'

export default {
  data () {
    return {
      scrollerTop: '',
      scrollerHeight: '',
      winWidth: '',
      options:null,
      data: [],
      gh_data: [],
      total_data: []
    }
  },
  components: {
    topFilter,
    crmCover,
    crmTabbar,
    MemberItem,
    Echart
  },
  mounted () {
    this.$nextTick(() => {
      this.caculateScroller()
    })

    this._initialize()
  },
  watch: {
    windowSize (size) {
      this.caculateScroller()
    },
  },
  computed: {
    ...mapState({
      isShowCover: state => state.app.isShowCover,
      totalTarget: state => state.app.target,
      user: state => state.app.user,
      windowSize: state => state.app.windowSize,
      isAppMode: state => state.config.isAppMode
    })
  },
  methods: {
    getDefaultParam () {
      const dateObj = new Date()
      let currentYear = dateObj.getFullYear()
      let currentMonth = dateObj.getMonth()
      let currentMonthDate = new Date(currentYear, currentMonth)
      return {
        timestamp: this.defaultTime || currentMonthDate
      }
    },

    caculateScroller () {
      const winHeight = window.innerHeight
      const filterHeight = 0
      const tabbarHeight = this.$refs['tabbar'] ? this.$refs['tabbar'].$el.offsetHeight : 0;
      this.scrollerTop = filterHeight || 12
      this.scrollerHeight = winHeight - filterHeight
      if (!this.isAppMode) {
        this.scrollerHeight = this.scrollerHeight - tabbarHeight
      }
      this.winWidth = window.innerWidth;
    },
    async _initialize () {
      const query = this.$route.query
      this.teamId = query.team_id
      this.defaultTime = parseInt(this.$route.query.time)
      let defaultParams = this.getDefaultParam()
      defaultParams = Object.assign({
        team_id: this.teamId
      }, defaultParams)
      const res = await this.getNewCustomGuanHuaiAnalyzeSource(defaultParams)

      this.gh_data = res.data.results.gh_data || []
      this.data = res.data.results.data || []
      this.total_data = res.data.results.total_data || []

      // const option = []
      // this.total_data.forEach((source) => {
        // option.push({
        //   value: source.custom_count,
        //   name: source.source_name
        // })
      // })

      this.options = {
        tooltip: {
          // formatter: "{a} <br/>{b} : {c} ({d}%)",
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: [
            {value: '2小时内', textStyle: {fontSize: 10}}
            ,{value: '4小时内', textStyle: {fontSize: 10}}
            ,{value: '24小时内', textStyle: {fontSize: 10}}
            ,{value: '48小时内', textStyle: {fontSize: 10}}
            ,{value: '1周内', textStyle: {fontSize: 10}}
            ,{value: '2周内', textStyle: {fontSize: 10}}],
          axisLine: {
            show: false
          },
          nameTextStyle: {
            color: '#ffcc01'
          },
          axisTick: {
            show: false
          },
          axisLabel:{
            interval:0,
          }
        },
        yAxis: {
          type: 'value',
          show: false,
          boundaryGap: [0, '20%']
        },
        series: [{
          data: this.total_data,
          type: 'bar',
          name: '跟进人数',
          itemStyle: {
            normal: {
              // barBorderColor: 'rgba(0,0,0,0)',
              // color: 'rgba(0,0,0,0)'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top'
              // formatter: '{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              // zIndex: 2,
              // rich: {
              //   a: {
              //     color: '#999',
              //     lineHeight: 22,
              //     align: 'center'
              //   },
              //   hr: {
              //     width: '100%',
              //     borderWidth: 0.5,
              //     height: 0
              //   },
              //   b: {
              //     fontSize: 16,
              //     lineHeight: 33
              //   },
              //   per: {
              //     color: '#eee',
              //     backgroundColor: '#334455',
              //     padding: [2, 4],
              //     borderRadius: 2
              //   }
              // }
            }
          },
          barCategoryGap: '50%',
        }]
      }
    },
    ...mapActions({
      getNewCustomGuanHuaiAnalyzeSource: 'getNewCustomGuanHuaiAnalyzeSource'
    })
  },

}
</script>

<style lang="less">
.source-guan-huai {

  .section-title {
    background-color: #f8f8f8;
    margin-top: 10px;
  }
  .bottom {
    background-color: #f8f8f8;
    margin-top: 10px;
  }

  .echart {
    padding-top: 20px;
    width: 100%;
    height: 320px;
  }

  .scroll-container {
    padding-bottom: 52px;
  }

  .title {
    width: 100%;
    overflow: hidden;
    color: #8F939A;
    font-size: 14px;
    padding-top:10px;
    text-align: center;
    .title-left {
      width: 30%;
      float: left;
      border-right: #00AEEE solid 3px;
    }
    .title-center {
      width: 35%;
      float: left;
      border-right: #00AEEE solid 3px;
    }
    .title-right {
      width: 30%;
      float: left;
    }
  }

  .box {
    width: 100%;
    color: #8F939A;
    font-size: 14px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;

    .box-top {
    }

    .box-bottom {
      width: 100%;
      overflow: hidden;
      text-align: center;
      border-bottom: 0.5px solid #e0d7d7;
      padding-bottom: 20px;
      margin: 10px 0px;
    }
    .left{
      width: 15%;
      float: left;
      font-size: 12px;
      h2,p{
        width: 100%;
      }
    }
    .spanStyle{
      color:#d9d9d9;
      margin-left: 5px;
    }

    .new-custom{
      .mt-progress-progress {
        background-color: #70c9f4;
        border-radius: 5px;
      }
    }
  }

}
</style>
